<!-- 托管管理 -->
<template>

  <div class="pag" >
    <div class="tabs">
      <div class="tabs-head">
        <div class="tabs-head-main">
          <div :class="{'choose': curTab==1}" @click="curTab=1">设备列表</div>
          <div :class="{'choose': curTab==2}" @click="curTab=2">托管详情</div>
        </div>
      </div>
      <div class="tabs-body">
        <div :class="{'choose': curTab==1}">
          <div class="m-table">
            <div class="m-table-head">
              <div class="m-table-row">
                <div class="m-table-cell">设备名称</div>
                <div class="m-table-cell">今日贡<br>献流量</div>
                <div class="m-table-cell">节点<br>收益</div>
                <div class="m-table-cell">分成<br>比例</div>
                <div class="m-table-cell">今日在<br>线时长</div>
                <div class="m-table-cell">复制</div>
              </div>
            </div>
            <div class="m-table-body">
              <cube-scroll :options="options" @pulling-up="onPullup" ref="scroll">
                <div class="m-list">
                  <div class="m-table-row" v-for="item in deviceList">
                    <div class="m-table-cell" style="flex-direction: column;">
                      <div class="device-name">{{ item.name }}</div>
                      <div class="device-status">
                        <div class="tag" :class="getDeviceStatusTxt(item).tagCls">{{ getDeviceStatusTxt(item).txt }}</div>
                        <div class="line-status" :class="getDeviceStatusTxt(item).lineCls"></div>
                      </div>
                    </div>
                    <div class="m-table-cell">{{ item.total }}</div>
                    <div class="m-table-cell">{{ item.cvnt }}</div>
                    <div class="m-table-cell">{{ item.per }}%</div>
                    <div class="m-table-cell">{{ item.onlineTime }}h</div>
                    <div class="m-table-cell"><img src="~assets/images/ship/copy.png" alt=""
                                                   class="copy-img clipboard-btn"
                                                   :data-clipboard-text="item.name + '\r\n' + item.sn"
                                                   @click="$suc('复制成功!')"></div>
                  </div>
                </div>
              </cube-scroll>
            </div>
          </div>
        </div>
        <div :class="{'choose': curTab==2}">
          <cube-scroll :options="options" @pulling-up="onPullup2" ref="scroll2">
            <div class="m-list">
              <div class="m-item" v-for="item in list2">
                <div>
                  <div>{{ item.nickname }}</div>
                  <p>UID:{{ item.uid }}</p>
                </div>
                <div>{{ item.createTime }}</div>
              </div>
            </div>
          </cube-scroll>
        </div>
      </div>
    </div>
    <div class="d-tools">
      <div class="d-add">
        <img src="~assets/images/ship/add.png" alt="">新增托管
      </div>
      <div class="d-book">
        <img src="~assets/images/ship/account-book.png" alt="">账本
      </div>
    </div>
  </div>

</template>

<script>
  import { getMinerListDetail } from 'api'

  export default {
    data() {
      return {
        options: {
          pullUpLoad: true
        },
        deviceList: [{
          name: 'yyets_32134',
            status: 1,
            name: 'yyets_32134',
            onlineTime: 20,
            cvnt: 27.23,
            total: '48.2M',
            per: 20,
            sn: 204535653333,
        }],
        list2: [],
        isLoading: false,
        curTab: 1,
        uid: '',
        token: ''
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.getData()
      })
    },
    mounted(){

    },
    watch: {
      curTab(val){
        this.$nextTick(()=>{
          this.$refs['scroll' + (val == 1 ? '' : val)].forceUpdate(true)
        })
      }
    },
    methods: {
        getDeviceStatusTxt(item) {
            let {status, statusObj} = item
            let state = +status
            if (statusObj) {
                return statusObj
            }
            let obj
            switch (state) {
                case 0:
                    obj = {
                        txt: '未开启',
                        tagCls: ['danger'],
                        lineCls: ['bad']
                    }
                    break;
                case 1:
                    obj = {
                        txt: '运行中',
                        tagCls: ['success'],
                        lineCls: ['on']
                    }
                    break;
                case 2:
                    obj = {
                        txt: '审核中',
                        tagCls: ['warning'],
                        lineCls: ['on']
                    }
                    break;
                case 3:
                    obj = {
                        txt: '已停止',
                        tagCls: ['info'],
                        lineCls: ['off']
                    }
                    break;
                default:
                    obj = {}
            }
            item.statusObj = obj
            return  obj
        },
        onPullup2(){
        let me = this
        let sc = this.$refs.scroll2
        //console.log(this.list.length)
        if(this.list2.length < 50){
          return getMinerListDetail({
            source: 2,
            per: 50,
            page: 1
          })
            .then(({data})=>{
              if(!data){
                return
              }
              this.list2 = data
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }).catch(e=>{
              sc.forceUpdate()
            })
        }

        let pagec = Math.floor((this.list2.length - 50) / 50) + 1
        let pagey = (this.list2.length - 50) % 50
        getMinerListDetail(
          {
            source: 2,
            per: 50,
            page: 1 + pagec
          }
        )
          .then(({data})=>{
            if(!data){
              return
            }
            if(pagey){
              data.splice(0, pagey)
            }
            me.list2 = me.list2.concat(data)
            if(!data.length){
              sc.forceUpdate()
            }else{
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }

          }).catch(e=>{
          sc.forceUpdate()
        })

      },
      onPullup(){
        let me = this
        let sc = this.$refs.scroll
        //console.log(this.list.length)
        if(this.list.length < 50){
          return getMinerListDetail({
            source: 1,
            per: 50,
            page: 1
          })
            .then(data=>{
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }).catch(e=>{
              sc.forceUpdate()
            })
        }

        let pagec = Math.floor((this.list.length - 50) / 50) + 1
        let pagey = (this.list.length - 50) % 50
        getMinerListDetail(
          {
            source: 1,
            per: 50,
            page: 1 + pagec
          }
        )
          .then(({data})=>{
            if(!data){
              return
            }
            if(pagey){
              data.splice(0, pagey)
            }
            me.list = me.list.concat(data)
            if(!data.length){
              sc.forceUpdate()
            }else{
              this.$nextTick(()=>{
                sc.forceUpdate(true)
              })
            }

          }).catch(e=>{
          sc.forceUpdate()
        })

      },
      getData(){
        getMinerListDetail({
          source: 1,
          per: 50,
          page: 1
        })
          .then(({data})=>{
            if(!data){
              return
            }
            this.list = data
          })
          .catch(e=>{
            this.$warn(e.info)
          })
        getMinerListDetail({
          source: 2,
          per: 20,
          page: 1
        })
          .then(({data})=>{
            if(!data){
              return
            }
            this.list2 = data
          })
          .catch(e=>{
            this.$warn(e.info)
          })
      },
      toastTip (info) {
        this.$warn(info)
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  .pag {
    height: 100%;
    overflow-y: auto;
    background: #F5F5FB;
  }

  .tabs {
    height: 100%;
    color: #202C5B;
    font-size: 26px;
  }

  .tabs-head {
    align-items: flex-end;
    display: flex;
    height:96px;
    background:linear-gradient(180deg,rgba(73,189,250,1) 0%,rgba(43,117,243,1) 100%);
    padding: 0 32px;
  }

  .tabs-head-main {
    display: flex;
    width: 100%;
    height:72px;
    background: #E5E5E9;
    border-radius:10px 10px 0px 0px;
    > div {
      height:72px;
      color: #838899;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      &.choose {
        background: #fff;
        color: #202C5B;
        font-weight: 600;
        border-radius:10px 10px 0px 0px;
      }
    }
  }



  .tabs-body {
    height: calc(100% - 96px);
    > div {
      height: 100%;
      display: none;
      &.choose {
        display: block;
      }
    }
  }

  .m-list {

  }

  .m-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ECECEC;
    height: 97px;
    > div {
      &:nth-of-type(1) {
        font-size: 30px;
        color: #202C5B;
        p {
          margin-top: 14px;
          color: #71768C;
          font-size: 20px;
        }
      }
      &:nth-of-type(2) {
        font-size: 24px;
        color: #71768C;
      }
    }
  }

  .m-table {
    height: 100%;
  }

  .m-table-head {
    //height: 88px;
    border-bottom: 2px solid #C0C4D6;
    .m-table-row {
      height: 88px;
    }
  }

  .m-table-body {
    height: calc(100% - 88px);
  }

  .m-table-row {
    display: flex;
    align-items: center;
    margin-top: 8px;
    background: #fff;
    height: 106px;
    padding: 0 30px;
  }

  .m-table-cell{
    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-of-type(1) {
      max-width: 28%;
      width: 28%;
      justify-content: start;
    }
    &:nth-of-type(2) {
      max-width: 16%;
      width: 16%;
    }
    &:nth-of-type(3) {
      max-width: 16%;
      width: 16%;
    }
    &:nth-of-type(4) {
      max-width: 14%;
      width: 14%;
    }
    &:nth-of-type(5) {
      max-width: 14%;
      width: 14%;
    }
    &:nth-of-type(6) {
      max-width: 12%;
      width: 12%;
    }
  }


  .tag {
    width:76px;
    height:30px;
    border-radius:4px;
    font-size:20px;
    font-weight:500;
    color:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
    //margin-top: 16px;
    &.warning {
      background:rgba(247,163,16,1);
    }
    &.success {
      background:#10D592;
    }
    &.danger {
      background:#EB3257;
    }
    &.info {
      background:#697a9b;
    }
  }

  .line-status {
    width: 22px;
    height: 30px;
    background: no-repeat center center;
    background-size: contain;
    margin-left: 17px;
    &.off {
      background-image: url("~assets/images/miningboard/no.png");
    }
    &.on {
      background-image: url("~assets/images/miningboard/yes.png");
    }
    &.bad {
      background-image: url("~assets/images/miningboard/bad.png");
    }
  }


  .copy-img {
    width: 40px;
    height: 40px;
  }

  .device-name {
    font-weight: 600;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.31;
  }

  .device-status {
    width: 100%;
    display: flex;
    margin-top: 14px;
    align-items: center;
    justify-content: start;
  }

  .d-tools {
    z-index: 100;
    position: fixed;
    left: 0;
    bottom: 31px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      color: #fff;
      height:84px;
      background:rgba(23,62,143,1);
      border-radius:8px;
      img {
        width: 34px;
        height: 34px;
        margin-right: 12px;
      }
    }
    .d-add {
      width: 420px;
    }
    .d-book {
      width: 240px;
    }
  }

</style>













